<template>
	<view class="msg_red"><!-- opened -->
		<view class="red-banner">
			<image class="red-icon" src="/static/images/red.png" mode="aspectFit"></image>
			<view class="red-brief">
				<view class="u-line-1 u-font-32 text-bold">
					{{info.brief||'恭喜发财，大吉大利'}}
				</view> 
				<!-- <view class="u-line-1 u-font-26">
					已领取
				</view> -->
			</view>
		</view>
		<view class="red-foot">
			<text class="">{{info.type}}红包</text>
		</view>
	</view>
</template>

<script>
	import {TYPES} from "@/api/red.js"
	export default{
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		data(){
			return{
				TYPES
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_red{
		width: 460rpx;
		background-color: #fba141;
		color: #ffffff;
		border-radius: 0 10rpx 10rpx 10rpx;
		padding: 0rpx 24rpx;
		position: relative;
		&.opened{
			background-color: #f9e2c6;
			&::before{
				border-color: #f9e2c6;
			}
			&::after{
				border-color: #f9e2c6;
			}
		}
		&::before{
			position: absolute;
			content: '';
			border-width: 10rpx;
			border-style: solid;
			border-color: #eda252;
			border-bottom-color:transparent;
			border-left-color: transparent;
			top: 0;
			left: -8rpx;
		}
		.red-banner{
			padding: 24rpx 0;
			display: flex;
			align-items: center;
		}
		.red-icon{
			width: 80rpx;
			height: 80rpx;
			margin-right: 14rpx;
			flex-shrink: 0;
		}
		.red-brief{
			flex: 1;
			overflow: hidden;
		}
		.red-foot{
			font-size: 20rpx;
			padding: 14rpx 0rpx;
			position: relative;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 1rpx;
				background-color: rgba(255, 255, 255, 0.5);
				transform: scaleY(0.5);
				pointer-events: none;
				
				
				
				
				
				
				z-index: 2;
			}
		}
	}
	.self{
		.msg_red{
			border-radius: 10rpx 0 10rpx 10rpx;
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #eda252;
				border-right-color: transparent;
				border-bottom-color: transparent;
				top: 0;
				right: -8rpx;
			}
		}
	}
</style>
